<template>
  <div class="address-container">
    <!-- 地址列表 -->
    <div class="address-list">
      <div 
        v-for="address in addresses" 
        :key="address.addressId" 
        class="address-card"
        :class="{ 'default-address': address.isDefault }"
      >
        <div class="address-header">
          <h3 class="venue-name">场馆 {{ address.venueId }}</h3>
          <span v-if="address.isDefault" class="default-tag">默认</span>
        </div>
        <p class="specific-location">{{ address.specificLocation }}</p>
        <div class="address-footer">
          <button class="action-btn edit" @click.stop="showEditModal(address)">
            <i class="icon-edit"></i>
          </button>
          <button class="action-btn delete" @click.stop="showDeleteConfirm(address.addressId)">
            <i class="icon-delete"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <div class="spinner"></div>
      <span>加载中...</span>
    </div>
    
    <!-- 空状态 -->
    <div v-if="!loading && addresses.length === 0" class="empty">
      <i class="icon-empty"></i>
      <p>暂无配送地址</p>
      <button class="primary-btn" @click="showAddModal">添加新地址</button>
    </div>

    <!-- 添加按钮 (固定在导航栏上方) -->
    <div class="add-button-container">
      <button class="add-button" @click="showAddModal">
        <i class="icon-add"></i> 添加新地址
      </button>
    </div>

    <!-- 添加/编辑地址弹窗 -->
    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ modalType === 'add' ? '添加新地址' : '编辑地址' }}</h3>
          <button class="close-btn" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>场馆ID</label>
            <input v-model="currentAddress.venueId" type="number" placeholder="请输入场馆ID">
          </div>
          <div class="form-group">
            <label>具体位置</label>
            <textarea v-model="currentAddress.specificLocation" 
                     placeholder="例如：3号楼201会议室"></textarea>
          </div>
          <div class="form-group checkbox-group">
            <input type="checkbox" id="setDefault" v-model="currentAddress.isDefault">
            <label for="setDefault">设为默认地址</label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="secondary-btn" @click="closeModal">取消</button>
          <button class="primary-btn" @click="saveAddress">保存</button>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-if="showDeleteModal" class="confirm-modal">
      <div class="confirm-content">
        <p>确定要删除这个地址吗？</p>
        <div class="confirm-actions">
          <button class="secondary-btn" @click="showDeleteModal = false">取消</button>
          <button class="danger-btn" @click="confirmDelete">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      addresses: [],
      loading: false,
      showModal: false,
      showDeleteModal: false,
      modalType: 'add', // 'add' 或 'edit'
      currentAddress: {
        addressId: null,
        userId: null,
        venueId: null,
        specificLocation: '',
        isDefault: false
      },
      deleteAddressId: null
    }
  },
  mounted() {
    this.fetchAddresses(localStorage.getItem('userId'))
  },
  methods: {
    async fetchAddresses(userId) {
      this.loading = true
      try {
        const response = await axios.get(`http://localhost:8081/addresses/${userId}`)
        this.addresses = response.data || []
      } catch (error) {
        console.error('获取地址失败:', error)
      } finally {
        this.loading = false
      }
    },
    showAddModal() {
      this.modalType = 'add'
      this.currentAddress = {
        addressId: null,
        userId: 1,
        venueId: null,
        specificLocation: '',
        isDefault: false
      }
      this.showModal = true
    },
    showEditModal(address) {
      this.modalType = 'edit'
      this.currentAddress = {
        addressId: address.addressId,
        userId: address.userId,
        venueId: address.venueId,
        specificLocation: address.specificLocation,
        isDefault: address.isDefault
      }
      this.showModal = true
    },
    showDeleteConfirm(addressId) {
      this.deleteAddressId = addressId
      this.showDeleteModal = true
    },
    closeModal() {
      this.showModal = false
    },
    async saveAddress() {
      try {
        if (this.modalType === 'add') {
          await axios.post('http://localhost:8081/addresses/add', this.currentAddress)
        } else {
          await axios.put(`http://localhost:8081/addresses/${this.currentAddress.addressId}`, this.currentAddress)
        }
        await this.fetchAddresses(1)
        this.showModal = false
      } catch (error) {
        console.error('保存地址失败:', error)
      }
    },
    async confirmDelete() {
      try {
        await axios.delete(`http://localhost:8081/addresses/${this.deleteAddressId}`)
        this.addresses = this.addresses.filter(a => a.addressId !== this.deleteAddressId)
        this.showDeleteModal = false
      } catch (error) {
        console.error('删除地址失败:', error)
      }
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.address-container {
  padding: 16px;
  padding-bottom: 120px; /* 为底部按钮和导航栏留出空间 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 地址卡片样式 */
.address-list {
  display: grid;
  gap: 12px;
}

.address-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.default-address {
  border-left: 4px solid #409EFF;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.venue-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.default-tag {
  background: #e6f7ff;
  color: #1890ff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.specific-location {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.address-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  background: transparent;
}

.action-btn.edit {
  color: #1890ff;
}

.action-btn.delete {
  color: #ff4d4f;
}

/* 加载状态 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #409EFF;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 空状态 */
.empty {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.empty i {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 16px;
}

/* 按钮样式 */
.primary-btn {
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  width: 100%;
}

.secondary-btn {
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
}

.danger-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
}

/* 添加按钮容器 - 固定在导航栏上方 */
.add-button-container {
  position: fixed;
  bottom: 60px; /* 导航栏高度 */
  left: 0;
  right: 0;
  padding: 16px;
  z-index: 10;
  background: linear-gradient(to top, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);
}

.add-button {
  width: 100%;
  padding: 12px;
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 适配安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .add-button-container {
    bottom: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); /* 避免被导航栏遮挡 */
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: calc(80vh - 60px); /* 减去导航栏高度 */
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
}

.modal-body {
  padding: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-group input {
  width: auto;
  margin-right: 8px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #eee;
}

/* 删除确认弹窗 */
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

.confirm-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* 图标样式 */
.icon-edit:before { content: "✏️"; }
.icon-delete:before { content: "🗑️"; }
.icon-add:before { content: "+"; }
.icon-empty:before { content: "📭"; }

/* 响应式调整 */
@media (max-width: 320px) {
  .add-button {
    font-size: 14px;
    padding: 10px;
  }
  
  .address-card {
    padding: 12px;
  }
  
  .venue-name {
    font-size: 15px;
  }
}
</style>